
<template>
	<view class="container">
		<view  class="left-icon">
			<navSearchBar  :zIndex="titleZindex" background="" :initEenter="initEenter"></navSearchBar>
		</view>
		<view class="banner">
			<image :src="bgImage" mode="widthFix"></image>
		</view>
		<view class="info">
			<view class="info-logo">
				<image :src="clinetLogo" mode=""></image>
			</view>
			<view class="info-title flex-between">
				<view class="info-name">{{baseName}}</view>
				<view class="info-btn flex-row-center">
					<image src="/static/icon/union.png" mode=""></image>
					<text>{{typeName}}</text>
				</view>
			</view>
			<view class="info-content">
				<view class="info-active">
					<text>客户行业</text>
					<text>{{clientType}}</text>
				</view>
				<view class="info-active">
					<text>活动时间</text>
					<text>{{activityTime}}</text>
				</view>
				<view class="info-active">
					<text>活动行程</text>
					<text>{{travelDuration}}</text>
				</view>
				<view class="info-active">
					<text>活动地点</text>
					<text>{{simpleAddress}}</text>
				</view>
				<view class="info-active">
					<text>活动人数</text>
					<text>{{personNumber}}</text>
				</view>
			</view>
		</view>
		<view class="photo">
			<my-rich-text :htmlContent="content"></my-rich-text>
		</view>
		<view  v-if="visibleByAdmin">
			<my-guide-nav :navOptions="navOptions" :buttonOptions="customButtonGroups"  @buttonClick="onButtonClick" @textClick="onOptionClick"></my-guide-nav>
		</view>
		<view v-else>
			<userGuideNav  :userInfo="contactInfo"></userGuideNav>
		</view>
		<wx-share ref="share"></wx-share>
	</view>
</template>

<script>
	import {USER_INFO,ROLE_TYPE} from '@/common/util/constants.js';
	import userGuideNav from '../common/user-guide-nav.vue';
	import pageShowOrHideMixin from '@/common/mixin/pageShowOrHideMixin';
	export default {
		mixins:[pageShowOrHideMixin],
		components:{
			userGuideNav
		},
		data() {
			return {
				initEenter:false,
				contactInfo:{},
				bgImage:'',
				clinetLogo:'',
				baseName:'',
				typeName:'',
				clientType:'',
				activityTime:'',
				travelDuration:'',
				content:'',
				personNumber:'',
				simpleAddress:'',
				navOptions:[ {
					icon: 'star',
					text: '收藏',
					iconColor:'#656371',
					fontColor:'#656371',
					imgUrl:'/static/icon/collect.png'
				  },{
					icon: 'write',
					text: '标注',
					iconColor:'#656371',
					fontColor:'#656371',
					imgUrl:'/static/icon/label.png',
				  }],
				customButtonGroups:[{
					text: '分享案例',
					backgroundColor: '#05C160',
					icon:'tn-icon-send',
					color: '#FFFFFF',
					imgUrl:'/static/icon/share.png'
				  }],
				roleType:ROLE_TYPE.COMMON,
				currentPath:''
			}
		},
		computed:{
			visibleByAdmin(){
				return this.roleType == ROLE_TYPE.ADMIN;
			}
		},
		onShareAppMessage(object){
			console.log('onShareAppMessage',object)
			return {
			      title: this.baseName+'—精选案例',
			      path: this.currentPath
			      
			    }
		},
		onLoad(e){
			this.baseId = this.$Route.query.id;
			let role_id;
			let userInfo = uni.getStorageSync(USER_INFO);
			let shareId;
			if(userInfo) {
				role_id = userInfo.role_id;
				this.userId = userInfo.id;
			}
			if(e&&e.id){
				this.baseId = e.id;
			}
			if(e&&e.scene){//扫码，如果扫码人已经打开过该app会走这
				let scene = decodeURIComponent(e.scene)
				let relist = scene.match(/id=(.*)/)
				console.log('options',relist)
				let sceneId;
				if(relist[1]){
					sceneId = relist[1];
				}
				this.baseId = sceneId;
			}
			if(e && e.user_id){//用户先点开一个人的分享已经启动该app，在点开另一个的分享，就会走这不会走下面启动参数还是之前的
				shareId = e.user_id;
			}
			let launchOptions = uni.getLaunchOptionsSync();
			let pages = getCurrentPages();
			console.log('curpage', pages.length)
			if(!this.baseId && launchOptions.path == "pages/sample/detail"){
				
				if(launchOptions.query.id || launchOptions.query.scene){
					////从分享得地方启动得 或扫码
					let sceneId;
					if(launchOptions.query.scene) {
						let scene = decodeURIComponent(launchOptions.query.scene)
						let relist = scene.match(/id=(.*)/)
						console.log(relist)
						if(relist[1]){
							sceneId = relist[1];
						}
					}
					if(pages.length == 1){
						this.baseId = launchOptions.query.id || sceneId;
						this.initEenter = true;
						shareId = launchOptions.query.user_id;
					}
				} else {
					this.$tip.alert('传参无效')
				}
			}
			
			if(role_id == 1) {
				this.roleType = ROLE_TYPE.ADMIN;
			} else {
				this.roleType = ROLE_TYPE.COMMON;
				if(shareId){//c端用户点击分享的话
					this.userId = shareId;
				}
			}
			this.currentPath = `/pages/sample/detail?id=${this.baseId}&user_id=${this.userId}`;
			this.getDetail().then((res) => {
				if(this.roleType == ROLE_TYPE.ADMIN){
					this.getCollectStatus();
				}
				//这时详情接口已返回
				this.sendToServerOnShow(this.baseName, this.bgImage);
			})
			let prevPage = pages[pages.length - 2];
			if(prevPage){
				prevPage.$vm.detail_page_flag = true;
			}
		},
		methods: {
			getDetail(){
				return new Promise((resolve,reject) =>{
					this.$http.get(`/api/business/example/view/${this.baseId}`,{is_user:1, user_id:this.userId}).then((res) => {
						let result = res.data;
						if(result.status == 200) {
							this.sampleId = result.data.id;
							console.log('jidi',res.data);
							this.bgImage =result.data.picture;
							this.baseName = result.data.title;
							this.typeName = result.data.category[0].title;
							this.personNumber = result.data.activity_total;
							this.travelDuration = result.data.activity_course.text;
							this.activityTime = result.data.activity_time;
							this.clientType = result.data.industryInfo;
							this.simpleAddress = result.data.province_id.text + '/'+ result.data.city_id.text+'/'+'/'+ result.data.region_id.text;
							// this.detailAddress = result.data.province_id.text + result.data.city_id.text + result.data.region_id.text + result.data.address;
							this.clinetLogo = result.data.logo;
							
							this.content = result.data.detail&&result.data.detail.content||'';
							this.contactInfo.name = result.data.user.nickname;
							this.contactInfo.imgUrl = result.data.user.avatar;
							this.contactInfo.position = result.data.user.detail.position;
							this.contactInfo.phone = result.data.user.username;
						
							
							resolve()
						}
					})
				})
			},
			getCollectStatus(){
				let data = {
					example_id:this.sampleId,
					
				}
				this.$http.get('/api/member/business/collect/example/status',data).then((res) => {
					if(res.data.status == 200){
						this.collectStatus = res.data.data;
						if(this.collectStatus){
							this.navOptions[0].imgUrl = '/static/icon/collect-fill.png';
							this.navOptions[0].icon = 'star-fill';
							this.navOptions[0].text = '已收藏'
						} else {
							this.navOptions[0].imgUrl = '/static/icon/collect.png';
							this.navOptions[0].icon = 'star';
							this.navOptions[0].text = '收藏'
						}
						
					}
					
				})
			},
			onOptionClick(index) {
				console.log('onOptionClick',index)
				if(index == 0) {
					//收藏
					this.collect();
				} else if(index == 1) {
					//标注
					this.$Router.push({name:'sampleLabel',query:{img:this.bgImage,title:this.baseName,example_id:this.sampleId}});
				}
			},
			onButtonClick(e){
				console.log('onButtonClick',e)
				this.$refs.share.open(this.bgImage);
				const data = {
					example_id:this.sampleId,
					path: this.currentPath
				}
				this.$http.post('/api/member/business/share/example/handle', data).then((res) => {
					
				})
			},
			collect(){
				let data = {
					example_id:this.sampleId,
					
				}
				
				this.$http.post('/api/member/business/collect/example/handle',data).then((res) => {
					
					if(res.data.status == 200) {
						
						if(!this.collectStatus){
							this.collectStatus = true;
							this.$tip.success('收藏成功')
							this.navOptions[0].icon = 'star-fill';
							this.navOptions[0].imgUrl = '/static/icon/collect-fill.png';
							this.navOptions[0].text = '已收藏'
						} else {
							this.collectStatus = false;
							this.$tip.success('取消收藏')
							this.navOptions[0].icon = 'star';
							this.navOptions[0].imgUrl = '/static/icon/collect.png';
							this.navOptions[0].text = '收藏'
						}
					} else {
						
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F2F3F5;
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		position: relative;
		// z-index: -2;
		.left-icon{
			position: fixed;
			
			z-index:1;
		}
	}
	.banner {
		// height: 750rpx;
		position: relative;
		image {
			width: 100%;
			// height: 750rpx;
			// position: absolute;
			// left: 0;
			// top: 0;
			// z-index: -1;
		}
	}
	.info {
		// height: 798rpx;
		margin: -36rpx 30rpx 30rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-bottom: 56rpx;
		.info-logo {
			width: 224rpx;
			height: 114rpx;
			position: absolute;
			left: 0;
			background: #FFFFFF;
			top: -66rpx;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			image {
				width: 144rpx;
				height:74rpx;
			}
		}
		.info-title {
			margin: 0rpx 0 60rpx 20rpx;
			padding-top: 60rpx;
			.info-name {
				flex:1;
				
				padding-left: 20rpx;
				word-wrap:break-word;
				word-break: break-all;
				font-size: 56rpx;
				line-height: 62rpx;
				color:#616571;
				font-weight: $Semibold;
			}
			.info-btn {
				margin-left: 86rpx;
				padding: 0 20rpx;
				
				height: 62rpx;
				background-color: #485160;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: $Semibold;
				display: flex;
				justify-content: center;
				align-items: center;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				text{
					margin-left: 18rpx ;
				}
				image{
					width: 36rpx;
					height: 26rpx;
				}
			}
		}
		.info-content {
			margin: 0 30rpx;
			padding: 60rpx 40rpx 78rpx;
			background: #F5F6F8;
			border-radius: 20rpx;
		
			.info-active {
				display: flex;
				align-items: center;
				&:not(:last-child) {
					margin-bottom: 50rpx;
				}
			}
			text {
				line-height: 32rpx;
				font-size: 32rpx;
				
				color: #656668;
				&:first-child{
					width: 128rpx;
					flex-shrink: 0;
					margin-right: 50rpx;
				}
			}
		}
	}
	.photo {
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		
	}
</style>
